<script setup lang="ts">
import ContentTitle from '@/components/ContentTitle/index.vue'
import ItemShopkeeper from '@/components/ItemShopkeeper/index.vue'
import Tag from './components/Tag/index.vue'

const typeTag = [{
    label: '日榜',
    value: 'day'
}, {
    label: '月榜',
    value: 'month'
}, {
    label: '季榜',
    value: 'quarter'
}, {
    label: '年榜',
    value: 'year'
}]

const classifyTag = [{
    label: '销量',
    value: 'sales'
}, {
    label: '作品数',
    value: 'works'
}, {
    label: '浏览量',
    value: 'hits'
}, {
    label: '作品收藏数',
    value: 'collections'
}, {
    label: '转发数',
    value: 'shares'
}]

</script>

<template>
    <div class="shopkeeper">
        <div class="title">
            <ContentTitle title="排行榜" englishTitle="PAI HANG BANG " />
        </div>
        <div class="tags">
            <Tag class="tag" label="类型：" :value="typeTag" />
            <Tag class="tag" label="分类：" :value="classifyTag" />
        </div>
        <div class="list">
            <div class="action-bar">
                <p>排名</p>
                <p>店主信息</p>
                <p>操作</p>
            </div>
            <ItemShopkeeper v-for="item in 4" :key="item" showRanking />
        </div>
    </div>
</template>

<style lang="scss" scoped>
.shopkeeper {
    width: 1300px;
    margin: 0 auto;

    .tags {
        border-bottom: 1px solid #BBBBBB;

        .tag {
            margin-bottom: 20px;
        }
    }

    .list {
        margin: 0 auto;
        border-top: 1px solid #E8E8E8;

        .action-bar {
            display: flex;
            align-items: center;
            color: rgba(140, 142, 143, 1);
            font-size: 14px;
            background-color: rgba(245, 247, 250, 1);
            height: 45px;
            margin-top: 14px;

            p {
                &:nth-child(1) {
                    text-indent: 35px;
                    width: 155px;
                }

                &:nth-child(2) {
                    width: 760px;
                }
            }
        }
    }

    .title {
        display: flex;
        justify-content: space-between;
        margin: 28px 0;
    }
}
</style>